"use client"

import type { LucideIcon } from "lucide-react"
import {
   ArrowUpCircle,
   CheckCircle2,
   Circle,
   HelpCircle,
   XCircle,
} from "lucide-react"
import * as React from "react"

import { ny } from "~/lib/utils"
import { Button } from "~/registry/default/ui/button"
import {
   Command,
   CommandEmpty,
   CommandGroup,
   CommandInput,
   CommandItem,
   CommandList,
} from "~/registry/default/ui/command"
import {
   Popover,
   PopoverContent,
   PopoverTrigger,
} from "~/registry/default/ui/popover"

interface Status {
   value: string
   label: string
   icon: LucideIcon
}

const statuses: Status[] = [
   {
      value: "backlog",
      label: "Backlog",
      icon: HelpCircle,
   },
   {
      value: "todo",
      label: "Todo",
      icon: Circle,
   },
   {
      value: "in progress",
      label: "In Progress",
      icon: ArrowUpCircle,
   },
   {
      value: "done",
      label: "Done",
      icon: CheckCircle2,
   },
   {
      value: "canceled",
      label: "Canceled",
      icon: XCircle,
   },
]

export default function ComboboxPopover() {
   const [open, setOpen] = React.useState(false)
   const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(
      null,
   )

   return (
      <div className="flex items-center space-x-4">
         <p className="text-muted-foreground text-sm">Status</p>
         <Popover open={open} onOpenChange={setOpen}>
            <PopoverTrigger asChild>
               <Button
                  variant="outline"
                  size="sm"
                  className="w-[150px] justify-start"
               >
                  {selectedStatus ? (
                     <>
                        <selectedStatus.icon className="mr-2 size-4 shrink-0" />
                        {selectedStatus.label}
                     </>
                  ) : (
                     <>+ Set status</>
                  )}
               </Button>
            </PopoverTrigger>
            <PopoverContent className="p-0" side="right" align="start">
               <Command>
                  <CommandInput placeholder="Change status..." />
                  <CommandList>
                     <CommandEmpty>No results found.</CommandEmpty>
                     <CommandGroup>
                        {statuses.map((status) => (
                           <CommandItem
                              key={status.value}
                              value={status.value}
                              onSelect={(value) => {
                                 setSelectedStatus(
                                    statuses.find(
                                       (priority) => priority.value === value,
                                    ) || null,
                                 )
                                 setOpen(false)
                              }}
                           >
                              <status.icon
                                 className={ny(
                                    "mr-2 size-4",
                                    status.value === selectedStatus?.value
                                       ? "opacity-100"
                                       : "opacity-40",
                                 )}
                              />
                              <span>{status.label}</span>
                           </CommandItem>
                        ))}
                     </CommandGroup>
                  </CommandList>
               </Command>
            </PopoverContent>
         </Popover>
      </div>
   )
}
